<template>
    <div class="preview_homework">
        <el-row :gutter="20">
            <el-col :span="4">
                <FixedHeightVue>
                    <el-scrollbar>
                        <div class="left_content">
                            <div class="job_name">
                                <span class="job_name_label">作业名称：</span>
                                <span class="job_name_title">{{ workView.workName }}</span>
                            </div>
                            <template v-if="props.type == 1">
                                <!-- 分割线 -->
                                <div class="left_content_line"></div>
                                <!-- 提交作业 -->
                                <div class="left_content_submit">
                                    <el-button type="primary" icon="Position" @click="submitWork">提交作业</el-button>
                                </div>
                                <!-- 计时器 -->
                                <div class="left_content_timer">
                                    <span class="left_content_timer_label">计时器：</span>
                                    <span class="left_content_timer_title">{{ workViewTime }}</span>
                                </div>
                            </template>
                            <!-- 总分 -->
                            <template v-if="props.type == 2">
                                <!-- 分割线 -->
                                <div class="left_content_line"></div>
                                <div class="left_content_score">
                                    <span class="left_content_score_label">总分：</span>
                                    <span class="left_content_score_title">{{ workView.score }}</span>
                                </div>
                            </template>
                            <!-- 分割线 -->
                            <div class="left_content_line"></div>
                            <!-- 单选题按钮 -->
                            <div class="left_content_radio">
                                <div class="left_content_radio_title">单选题</div>
                                <div class="left_content_radio_content">
                                    <div class="left_content_radio_content_item" :class="{ colorChoose: item.answers }"
                                        v-for="item, index in workView.oneChoiceQuestionList" :key="index"
                                        v-scroll-to-element="'#targetElement' + item.id">{{ index + 1
                                        }}</div>
                                </div>
                            </div>
                            <!-- 分割线 -->
                            <div class="left_content_line"></div>
                            <!-- 多选题 -->
                            <div class="left_content_radio">
                                <div class="left_content_radio_title">多选题</div>
                                <div class="left_content_radio_content">
                                    <div class="left_content_radio_content_item"
                                        :class="{ colorChoose: item.answers.length > 0 }"
                                        v-for="item, index in workView.mulChoiceQuestionList" :key="index"
                                        v-scroll-to-element="'#mulChoiceQuestionList' + item.id">{{ index + 1
                                        }}</div>
                                </div>
                            </div>
                            <!-- 分割线 -->
                            <div class="left_content_line"></div>
                            <!-- 判断题 -->
                            <div class="left_content_radio">
                                <div class="left_content_radio_title">判断题</div>
                                <div class="left_content_radio_content">
                                    <div class="left_content_radio_content_item" :class="{ colorChoose: item.answers }"
                                        v-for="item, index in workView.judgeQuestionList" :key="index"
                                        v-scroll-to-element="'#judgeQuestionList' + item.id">{{ index + 1
                                        }}</div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </FixedHeightVue>
            </el-col>
            <el-col :span="20">
                <FixedHeightVue style="background-color: #fff;border-radius: 10px;">
                    <el-scrollbar>
                        <div class="right_content">
                            <!-- 单选题目 -->
                            <div class="right_content_radio">
                                <div class="right_content_radio_title">单选题</div>
                                <div class="right_content_radio_content"
                                    v-for="item, index in workView.oneChoiceQuestionList" :key="item.id"
                                    :id="'targetElement' + item.id">
                                    <!-- 题目 -->
                                    <div class="right_content_radio_content_title">
                                        <span class="index">{{ index + 1 }}.</span>
                                        <span>{{ item.questionContent }}</span>
                                    </div>
                                    <!-- 选项 -->
                                    <div class="right_content_radio_content_option">
                                        <!-- 预览 -->
                                        <div class="determine_item" v-for="it in item.optionsInfoDtos" :key="it.id">
                                            <el-radio v-model="item.answers" :value="it.options"
                                                :disabled="props.type == 2 || props.type == 3">
                                                <span class="determine_item_option">{{ it.options }}.</span>
                                                <span class="determine_item_content">{{ it.optionsContent }}</span>
                                            </el-radio>

                                        </div>
                                        <!-- 分割线 -->
                                        <div class="left_content_line" style="margin-top: 30px"></div>
                                    </div>
                                    <!-- 正确答案 和 我的答案 -->
                                    <div class="right_content_radio_content_answer" v-if="props.type == 2">
                                        <div class="determine_item">
                                            <span class="determine_item_option">正确答案：</span>
                                            <span class="determine_item_content">{{ item.answersComplete[0] }}</span>
                                        </div>
                                        <div class="determine_item">
                                            <span class="determine_item_option">我的答案：</span>
                                            <span class="determine_item_content">{{ item.answers }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 多选题 -->
                            <div class="right_content_radio">
                                <div class="right_content_radio_title">多选题</div>
                                <div class="right_content_radio_content"
                                    v-for="item, index in workView.mulChoiceQuestionList" :key="item.id"
                                    :id="'mulChoiceQuestionList' + item.id">
                                    <el-checkbox-group v-model="item.answers"
                                        :disabled="props.type == 2 || props.type == 3">
                                        <!-- 题目 -->
                                        <div class="right_content_radio_content_title">
                                            <span class="index">{{ index + 1 }}.</span>
                                            <span>{{ item.questionContent }}</span>
                                        </div>
                                        <!-- 选项 -->
                                        <div class="right_content_radio_content_option">
                                            <div class="determine_item" v-for="it in item.optionsInfoDtos" :key="it.id">
                                                <el-checkbox :value="it.options">
                                                    <span class="determine_item_option">{{ it.options }}.</span>
                                                    <span class="determine_item_content">{{ it.optionsContent }}</span>
                                                </el-checkbox>
                                            </div>
                                            <!-- 分割线 -->
                                            <div class="left_content_line" style="margin-top: 30px"></div>

                                        </div>
                                    </el-checkbox-group>
                                    <!-- 正确答案 和 我的答案 -->
                                    <div class="right_content_radio_content_answer" v-if="props.type == 2">
                                        <div class="determine_item">
                                            <span class="determine_item_option">正确答案：</span>
                                            <span class="determine_item_content">{{
            handleMulChoiceAnswer(item.answersComplete)
        }}</span>
                                        </div>
                                        <div class="determine_item">
                                            <span class="determine_item_option">我的答案：</span>
                                            <span class="determine_item_content">{{ handleMulChoiceAnswer(item.answers
        ) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 判断题 -->
                            <div class="right_content_radio">
                                <div class="right_content_radio_title">判断题</div>
                                <div class="right_content_radio_content"
                                    v-for="item, index in workView.judgeQuestionList" :key="item.id"
                                    :id="'judgeQuestionList' + item.id">
                                    <!-- 题目 -->
                                    <div class="right_content_radio_content_title">
                                        <span class="index">{{ index + 1 }}.</span>
                                        <span>{{ item.questionContent }}</span>
                                    </div>
                                    <!-- 选项 -->
                                    <div class="right_content_radio_content_option">
                                        <div class="determine_item" v-for="it in item.optionsInfoDtos" :key="it.id">
                                            <el-radio v-model="item.answers" :value="it.options"
                                                :disabled="props.type == 2 || props.type == 3">
                                                <span class="determine_item_option">{{ it.options }}.</span>
                                                <span class="determine_item_content">{{ it.optionsContent }}</span>
                                            </el-radio>
                                        </div>
                                        <!-- 分割线 -->
                                        <div class="left_content_line" style="margin-top: 30px"></div>
                                    </div>
                                    <!-- 正确答案 和 我的答案 -->
                                    <div class="right_content_radio_content_answer" v-if="props.type == 2">
                                        <div class="determine_item">
                                            <span class="determine_item_option">正确答案：</span>
                                            <span class="determine_item_content">{{ item.answersComplete[0] }}</span>
                                        </div>
                                        <div class="determine_item">
                                            <span class="determine_item_option">我的答案：</span>
                                            <span class="determine_item_content">{{ item.answers }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </FixedHeightVue>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, toRefs, onBeforeUnmount } from "vue"

import FixedHeightVue from "@/components/base/FixedHeight.vue";
import { previewHomeworkApi, studentAnswerApi } from "@/api/index";
import { ElMessage, ElMessageBox } from "element-plus";

import useUserInfo from "store/useUserInfo.js";
const useUserInfoStore = useUserInfo();
import { storeToRefs } from 'pinia'
import { useRouter } from "vue-router";
const router = useRouter()
const { userInfo } = storeToRefs(useUserInfoStore)

const props = defineProps(['id', 'wid', 'type'])

const info = reactive({
    workView: {
    }
})

const queryWordView = async () => {
    const params = {
        id: props.id,
        operatorId: userInfo.value.userId
    }
    if (props.type == 2) {
        params.workRecordId = props.wid,
            params.bizeTyp = 0
    }
    const res = await previewHomeworkApi(params)
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        })
        return
    }
    ElMessage({
        type: 'success',
        message: '查询成功!',
    })
    info.workView = res.data
    if (props.type == 2) {
        // 处理单选判断的数据
        info.workView.oneChoiceQuestionList.forEach(item => {
            item.answers = item.answers[0]
        })
        info.workView.judgeQuestionList.forEach(item => {
            item.answers = item.answers[0]
        })
    }
}
// 处理多选的答案
const handleMulChoiceAnswer = (item) => {
    return item.join(",")
}
// 计时器
const workViewTime = ref('00:00:00')
const timer = ref(null)
// 从进来开始计算时间
const getWorkViewTime = () => {
    let time = 0
    timer.value = setInterval(() => {
        time++
        //将time毫秒转化为小时、分钟、秒
        let h = Math.floor(time / 3600)
        let m = Math.floor(time % 3600 / 60)
        let s = Math.floor(time % 3600 % 60)
        //将转化后的时间格式化
        h = h < 10 ? '0' + h : h
        m = m < 10 ? '0' + m : m
        s = s < 10 ? '0' + s : s
        //将格式化后的时间赋值给data中的workViewTime
        workViewTime.value = `${h}:${m}:${s}`
    }, 1000)

}
// 提交作业
const submitWork = async () => {
    console.log(info.workView);
    const params = {
        workRecordId: props.wid,
        userId: userInfo.value.userId
    }
    // 检查作业答案是否填写完整
    function isEmpty(arr, type) {
        return arr.some(item => {
            if (type == 0 || type == 2) {
                // 单选或者多选
                return item.answers == '' || item.answers == null
            }
            if (type == 1) {
                return item.answers.length == 0
            }
        });
    }
    const sumbmitFun = async () => {
        // 处理答案
        let workAnswerDtoList = []
        // 处理单选题答案
        info.workView.oneChoiceQuestionList.forEach(item => {
            workAnswerDtoList.push({
                questionId: item.id,
                answer: [item.answers]
            })
        })
        // 处理多选题答案
        info.workView.mulChoiceQuestionList.forEach(item => {
            workAnswerDtoList.push({
                questionId: item.id,
                answer: item.answers
            })
        })
        // 处理判断题答案
        info.workView.judgeQuestionList.forEach(item => {
            workAnswerDtoList.push({
                questionId: item.id,
                answer: [item.answers]
            })
        })
        params.workAnswerDtoList = workAnswerDtoList
        // 提交作业
        const res = await studentAnswerApi(params, workAnswerDtoList)
        if (res.code !== "10000") {
            ElMessage({
                showClose: true,
                message: res.message,
                type: "error",
            })
            return
        }
        ElMessage({
            type: 'success',
            message: '作业已提交！',
        })
        // 跳转到作业列表
        router.push({
            name: 'MyHomeworkDetail',
        })
    }
    if (isEmpty(info.workView.judgeQuestionList, 0) || isEmpty(info.workView.mulChoiceQuestionList, 1) || isEmpty(info.workView.oneChoiceQuestionList, 2)) {
        ElMessageBox.confirm(
            '你还有题目没有做是否提交作业?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(sumbmitFun)
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '您取消了提交。',
                })
            })
    }
    else {
        sumbmitFun()
    }
}

onBeforeUnmount(() => {
    clearInterval(timer.value)
})
onMounted(() => {
    queryWordView()
    if (props.type == 1) {
        getWorkViewTime()
    }
})
// 使用 toRefs 解构响应式对象  
const { workView } = toRefs(info);  
</script>

<style lang="scss" scoped>
.preview_homework {

    .left_content {
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 10px;
        border-radius: 10px;

        .job_name {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            &_label {
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                margin-right: 10px;
                margin-left: 15px;
            }

            &_title {
                font-size: 18px;
                /* font-weight: 600; */
                color: #333333;
                margin-right: 10px;
                flex: 1;
                /* 单行文本超出省略 */
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .left_content_radio {
            padding: 15px;

            &_title {
                font-size: 14px;
                font-weight: 600;
                color: #333333;
            }

            &_content {
                margin-top: 10px;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: auto;
                gap: 15px;

                .colorChoose {
                    background-color: #3d3af5;
                    color: #fff;
                }

                &_item {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 40px;
                    border-radius: 10px;
                    background-color: #f5f5f5;
                    margin-bottom: 10px;
                }
            }
        }

        .left_content_submit {
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .left_content_score {
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;

            .left_content_score_label {
                font-size: 14px;
                font-weight: 600;
                color: #333333;
                margin-right: 10px;
            }

            .left_content_score_title {
                font-size: 28px;
                font-weight: 600;
                color: #f80505;
            }
        }

        /* 计时器样式 */
        .left_content_timer {
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;

            .left_content_timer_label {
                font-size: 14px;
                font-weight: 600;
                color: #333333;
            }

            .left_content_timer_title {
                font-size: 18px;
                font-weight: 600;
                color: #333333;
                margin-left: 10px;
            }
        }
    }

    .right_content {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 10px;

        .right_content_radio {
            .right_content_radio_title {
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                background-color: #FAFAFA;
                padding: 20px;
                border-top: 1px solid #E6E6E6;
                border-bottom: 1px solid #E6E6E6;
            }

            .right_content_radio_content {


                .right_content_radio_content_title {
                    font-size: 16px;
                    padding: 20px;

                    .index {
                        margin-right: 20px;
                    }
                }

                .right_content_radio_content_option {
                    padding: 0 60px;

                    .determine_item {
                        display: flex;
                        align-items: center;
                        margin: 15px 0;

                        .determine_item_option {
                            font-size: 14px;
                            font-weight: 600;
                            color: #333;
                            /* margin-top: 10px; */
                            height: 30px;
                            line-height: 30px;
                            text-align: center;
                        }

                        .determine_item_btn {
                            display: flex;
                            align-items: center;
                            margin-left: 50px;
                        }

                        .determine_item_content {
                            font-size: 14px;
                            color: #333;
                            /* margin-top: 10px; */
                            height: 30px;
                            line-height: 30px;
                            text-align: center;
                        }
                    }
                }

                .right_content_radio_content_answer {
                    padding: 0 60px;

                    .determine_item {
                        display: flex;
                        align-items: center;
                        margin: 15px 0;

                        .determine_item_option {
                            font-size: 14px;
                            font-weight: 600;
                            color: #333;
                            /* margin-top: 10px; */
                            height: 30px;
                            line-height: 30px;
                        }

                        .determine_item_content {
                            font-size: 14px;
                            color: #e60c0c;
                            /* margin-top: 10px; */
                            height: 30px;
                            line-height: 30px;
                        }
                    }
                }
            }
        }
    }

    .scrollbar-demo-item {}
}
</style>